<template>
  <div ref="chart1" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
// 引入接口
import { reqFunnelAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any
const legend = ref([])
const title = ref()
const datas = ref([])
// 发起请求的函数
const init = async () => {
  let res = await reqFunnelAPI()
  if (res.code === 200) {
    legend.value = res.data.legend
    datas.value = res.data.datas
  }
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      legend: {
        data: legend.value,
        textStyle: {
          color: '#49bcf7', // 设置legend文本的颜色，这里是红色
        },
      },
      tooltip: {
        trigger: 'item', // 鼠标悬停在项上时触发
        formatter: '{b}: {c}', // 显示项的名称和对应的数值
      },
      calculable: true,
      series: [
        {
          name: '漏斗图',
          type: 'funnel',
          left: '10%',
          top: 60,
          //x2: 80,
          bottom: 60,
          width: '80%',
          // height: {totalHeight} - y - y2,
          min: 0,
          max: 30,
          minSize: '0%',
          maxSize: '100%',
          sort: 'none',
          gap: 2,
          label: {
            normal: {
              show: true,
              position: 'inside',
            },
            emphasis: {
              textStyle: {
                fontSize: 20,
              },
            },
          },
          labelLine: {
            normal: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: '#fff',
              borderWidth: 1,
            },
          },
          data: datas.value,
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style lang="scss" scoped></style>
